<template>
	<view>
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">结婚商家</block>
		</nav-custom>
		<view class="store-info">
			<view class="info-top">
				<image :src="storeInfo.image" class="bg"></image>
				<view class="logo">
					<view class="logo-img">
						<image :src="storeInfo.logo"></image>
					</view>
					<view class="name">{{storeInfo.name}}</view>
				</view>
				<view class="address">
					<view class="iconfont icon-dizhi"></view>
					{{storeInfo.address}}
				</view>
				<view class="contact">
					<view class="item" @click="onTel">
						<view class="iconfont icon-dianhuazixunhuawuzongheguanlibl"></view>
						{{storeInfo.telphone}}
					</view>
					<view class="item" @click="onCopy">
						<view class="iconfont icon-weixin1"></view>
						{{storeInfo.wechat}}
					</view>
					<view class="item go" @click="onCertification">
						<view class="iconfont icon-tiaozhuan1"></view>
						免费认证商家
					</view>
				</view>
			</view>
			<view class="info-cont">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: null,
				loading: true,
				content: null
			}
		},
		onLoad(optin) {
			this.getStoreInfo(optin.id)
		},
		methods: {
			//获取商家info数据
			getStoreInfo(id) {
				this.loading = true;
				let data = {
					storeId: id
				}
				this.$api.StoreInfo(data).then(res => {
					setTimeout(() => {
						this.loading = false;
					}, 500)
					this.storeInfo = res.data;
					let richtext = this.storeInfo.content;
					const regex = new RegExp('<img', 'gi');
					this.content = richtext.replace(regex, `<img style="max-width: 100%;"`);

				});
			},
			//拨打电话
			onTel() {
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.telphone
				});
			},
			//复制微信号
			onCopy() {
				uni.setClipboardData({
					data: this.storeInfo.wechat,
					success: function() {
						uni.showToast({ title: '复制成功' });
					}
				});
			},
			//认证商家
			onCertification(){
				uni.showToast({ title: '待开发' });
			}
		}
	}
</script>

<style lang="scss">
	.store-info {
		.info-top {
			padding: 10upx 20upx;
			background-size: cover;
			position: relative;

			.bg {
				width: 100%;
				height: 310upx;
			}

			.logo {
				text-align: center;
				margin-top: -70upx;

				.logo-img {
					margin: 0 auto;
					height: 140upx;
					width: 140upx;
					border-radius: 50%;
					padding: 10upx;
					overflow: hidden;
					background-color: #fff;

					image {
						height: 120upx;
						width: 120upx;
						border: 2upx solid #e7e7e7;
						border-radius: 50%;
					}
				}

				.name {
					height: 60upx;
					line-height: 60upx;
					font-weight: bold;
					font-size: 32upx;
					color: #333;
				}
			}

			.address {
				height: 60upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #e7e7e7;
				font-size: 26upx;
				color: #666;

				.iconfont {
					font-size: 30upx;
					color: var(--pink);
					padding-right: 10upx;
				}
			}

			.contact {
				height: 60upx;
				display: flex;
				align-items: center;

				.item {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 26upx;
					color: #666;

					.iconfont {
						font-size: 30upx;
						color: var(--pink);
						padding-right: 10upx;
					}

					&.go {
						color: red;

						.iconfont {
							color: red;
						}
					}
				}
			}
		}

		.info-cont {
			border-top: 16upx solid #f5f5f5;
			padding: 0 30upx 30upx;
		}
	}
</style>
